<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
  <script type="text/javascript" src="../../lib/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="condition">
  <!-- if条件判断 -->
  <h1>if条件判断</h1>
  <div>
    <h2 v-if="awesome">Vue is awesome!</h2>
    <h2 v-else>Oh no 😢</h2>
  </div>

  <!-- else-if条件判断 -->
  <h1>else-if条件判断</h1>
  <div>
    <h2 v-if="type==='A'">A</h2>
    <h2 v-else-if="type==='B'">B</h2>
    <h2 v-else-if="type==='D'">D</h2>
    <h2 v-else>C</h2>
  </div>

  <!-- 元素复用（输入框的值会复用） -->
  <h1>元素复用</h1>
  <div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input name="UserName" placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input name="Email" placeholder="Enter your email address">
    </template>
    <button v-on:click="toggleLoginType"> 修改 </button>
  </div>

  <!-- 元素不复用（添加一个具有唯一值的 key attribute 即可） -->
  <h1>元素不复用</h1>
  <div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input name="UserName" placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input name="Email" placeholder="Enter your email address" key="email-input">
    </template>
    <button v-on:click="toggleLoginType"> 修改 </button>
  </div>

  <!-- show判断显示 -->
  <h1>show判断显示</h1>
  <div>
    <h2 v-show="ok">Hello!</h2>
    <h2 v-show="!ok">!Hello</h2>
  </div>

</div>
<script>
  var vm = new Vue({
    el: '#condition',
    data: {
      awesome: true,
      type: 'D',
      loginType: 'username',
      ok: true
    },
    methods:{
      toggleLoginType: function () {
        return this.loginType = this.loginType === 'username' ? 'email' : 'username'
      }
    }
  })
  setInterval(function (){
    vm.awesome = !vm.awesome
    vm.ok = !vm.ok
  },1000);
</script>
</body>
</html>